<template>
    <div class="layout_footer">
        <div class="footer_tab">
            <div
                v-for="(item, index) in state.title"
                :key="index"
                class="tabcoot"
                @mouseover="state.GreenInitiativeShow = item.status === 'GreenInitiative'"
            >
                <span @click="changeMethod(item.status, index)">
                    <img :src="index === state.idx ? item.backActive : item.back" alt="" />
                </span>
                <span
                    :style="{ color: index === state.idx ? '#FF7200' : '#FFF' }"
                    @click="changeMethod(item.status, index)"
                >
                    {{ item.title }}
                </span>
                <div
                    v-if="state.GreenInitiativeShow && index === state.idx && item.status === 'GreenInitiative'"
                    class="tabImg"
                >
                    <p :class="{ active: state.GreenInitiativeIdx === 0 }" @click="changeComponent(0)">有毒有害气体</p>
                    <p :class="{ active: state.GreenInitiativeIdx === 1 }" @click="changeComponent(1)">水质&固废</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { CheckSiderView, SiderLeftListStore } from '@/store/index';
import {
    layoutFooterOverviewActive,
    layoutFooterOverview,
    layoutFooterSafesupervisi,
    layoutFooterSafesupervisiActive,
    layoutFooterEnvironment,
    layoutFooterEnvironmentActive,
    layoutFooterSecurity,
    layoutFooterSecurityActive,
    layoutFooterFirefight,
    layoutFooterEnergy,
    layoutFooterEnergyActive,
    layoutFooterEmergency,
    layoutFooterStatistics,
    layoutFooterStatisticsActive,
    layoutFooterFirefightActive,
    layoutFooterEmergencyActive
} from './img';

const store = CheckSiderView();
const storeSiderFlData = SiderLeftListStore();

interface State {
    title: Array<{
        title: string;
        back: string;
        backActive?: string;
        status: ViewSider.ViewStatus;
    }>;
    /* 底部菜单下标 */
    idx: number;
    /* 环保底部菜单显示隐藏 */
    GreenInitiativeShow: boolean;
    /** 环保底部菜单索引 */
    GreenInitiativeIdx: 0 | 1;
}

const state: State = reactive({
    GreenInitiativeIdx: 0,
    GreenInitiativeShow: false,
    title: [
        {
            back: layoutFooterOverview,
            backActive: layoutFooterOverviewActive,
            status: 'OverView',
            title: '总览'
        },
        {
            back: layoutFooterSafesupervisi,
            backActive: layoutFooterSafesupervisiActive,
            status: 'SecurityCheck',
            title: '安监'
        },
        {
            back: layoutFooterEnvironment,
            backActive: layoutFooterEnvironmentActive,
            status: 'GreenInitiative',
            title: '环保'
        },
        {
            back: layoutFooterSecurity,
            backActive: layoutFooterSecurityActive,
            status: 'Security',
            title: '安防'
        },
        {
            back: layoutFooterFirefight,
            backActive: layoutFooterFirefightActive,
            status: 'FireControl',
            title: '消防'
        },
        {
            back: layoutFooterEnergy,
            backActive: layoutFooterEnergyActive,
            status: 'Energy',
            title: '能源'
        },
        {
            back: layoutFooterEmergency,
            backActive: layoutFooterEmergencyActive,
            status: 'Emergency',
            title: '应急'
        },
        {
            back: layoutFooterStatistics,
            backActive: layoutFooterStatisticsActive,
            status: 'Statistics',
            title: '统计'
        }
    ],
    idx: 0
});
const listData: Array<ViewSider.SiderLeftListDataInfo> = [
    {
        name: '全部企业'
    },
    {
        name: '村落'
    },
    {
        name: '消防站'
    }
];

/** 选择底部功能菜单 */
const changeMethod = (item: ViewSider.ViewStatus, index: number) => {
    /** 消防菜单不显示sider */
    const FireControl: boolean = item === 'FireControl';
    store.UpDateHideViews();
    // setTimeout(() => {
    const ViewDisStatus = FireControl ? store.UpDateHideViews : store.UpDateShowViews;
    ViewDisStatus();

    store.UpDateViewStatus(item);
    // 更新视图
    // }, 300);

    /** 这是测试环保 sider 左侧 list悬浮数据 */
    if (item === 'GreenInitiative') {
        const testData: Array<ViewSider.SiderLeftListDataInfo> = [
            {
                name: '敏感区',
                children: [{ name: '敏感区1' }]
            },
            {
                name: '点监测',
                children: [
                    { name: '点监测1' },
                    { name: '点监测2' },
                    { name: '点监测3' },
                    { name: '点监测4' },
                    { name: '点监测5' },
                    { name: '点监测6' }
                ]
            },
            {
                name: '线监测',
                children: [{ name: '线监测1' }]
            },
            {
                name: '面监测',
                children: [{ name: '面监测1' }, { name: '面监测2' }, { name: '面监测3' }, { name: '面监测4' }]
            }
        ];
        storeSiderFlData.SetListData(testData);
    } else {
        // 更新sider左侧list数据
        storeSiderFlData.SetListData(listData);
    }
    state.idx = index;
    state.GreenInitiativeIdx = 0;
};
/** 环保多模块切换 */
const changeComponent = (e: 0 | 1) => {
    state.GreenInitiativeIdx = e;
    state.GreenInitiativeShow = false;
    store.UpDateViewStatus(e ? 'GreenInitiativeWaterQuality' : 'GreenInitiative');
};

onMounted(() => {
    storeSiderFlData.SetListData(listData);
});
</script>
<style scoped lang="scss">
.layout_footer {
    width: 100%;
    height: 65px;
    background: url('@img/footback.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0;

    .footer_tab {
        width: 45%;
        margin: 0 auto;
        display: flex;
        flex-grow: 1;
        justify-content: space-around;

        .tabcoot {
            width: 36px;
            text-align: center;
            cursor: pointer;
            position: relative;
            .tabImg {
                width: 132px;
                height: 62px;
                background: url('@img/huanbaoTab.png') no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: 50%;
                margin-left: -66px;
                top: -70px;
                z-index: 9;
                display: flex;
                justify-content: center;
                flex-direction: column;
                p {
                    color: #fff;
                    font-size: 12px;
                    &:last-of-type {
                        margin-top: 2px;
                    }
                }
                p.active {
                    color: #03d9e1;
                }
            }
            span {
                display: inline-block;
                font-weight: bold;
                &:nth-of-type(1) {
                    width: 100%;
                    height: 40px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                &:nth-of-type(2) {
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    color: #dfeef3;
                }
            }
        }
    }
}
</style>
